import React, { useState } from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
const { Header, Sider, Content } = Layout;
import "./home.less"
import { menus } from './home.config';
import { connect, useHistory } from 'umi';
import { MenuInfo } from 'rc-menu/lib/interface';

function Home(props: any) {
    const [collapsed, setCollapsed] = useState(false);
    const history = useHistory()
    const linkPage = ({ key }: MenuInfo) => {
        //   console.log(key)
        history.push(key)
    }
    const logout=()=>{
        history.push('/login')
    }
    const currentMenus=(newMenus:any)=>{
        return newMenus.filter((item:any)=>{
            if(item.children){
                item.children && currentMenus(item.children)
            }
            return item.roles.some((val:any)=> props.roles.includes(val))
        })
    }
    return (
        <Layout className='home'>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="logo">活动管理后台</div>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    items={currentMenus(menus)}
                    onClick={linkPage}
                />
            </Sider>
            <Layout className="site-layout">
                <Header
                    style={{
                        padding: 0,
                        background: "#fff",
                    }}
                >
                    <div className='header-box'>
                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: () => setCollapsed(!collapsed),
                        })}
                        <Button className='header-btn' type='link' onClick={logout}>退出登录</Button>
                    </div>
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: "#fff",
                    }}
                >
                    {props.children}
                </Content>
            </Layout>
        </Layout>
    )
}
export default connect((state:any)=>{
    return {
        roles:state.example.roles
    }
})(Home)